<template>
  <div>
    <div
      :data-clipboard-text="text"
      @click="copy"
      class="text-wrapper"
      :class="
        showUnfoldBtnObj[foldKey] && unFoldObj[foldKey] ? ellipsisClass : ''
      "
    >
      <div v-html="text" :class="foldContentClass" style="white-space: pre-wrap;"></div>
    </div>
    <div class="unfold" @click="handleFold(foldKey)" v-if="showUnfoldBtnObj[foldKey]">
      {{ unFoldObj[foldKey] ? '显示全部' : '折叠收起' }}
      <img
        :src="pic"
        style="vertical-align: middle;"
        width="20px"
        height="20px"
      />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Clipboard from 'clipboard';
import up from '@/assets/images/up.png';
import down from '@/assets/images/down.png';
export default {
  name: 'fold',
  data() {
    return {
      showUnfoldBtnObj: {},
      unFoldObj: {},
      pic: down
    };
  },
  props: {
    //处理的文字、也可以是富文本
    text: {
      type: String,
      required: true,
      default: ''
    },
    //超过几行显示省略号,先处理3行和4行的
    line: {
      type: Number,
      required: true,
      default: 3
    },
    //由于是数组，这里要一个唯一的foldKey作为标识
    foldKey: {
      required: true,
      default: ''
    }
  },
  computed: {
    ellipsisClass() {
      return 'ellipsis-' + this.line;
    },
    foldContentClass() {
      return 'fold-content-' + this.foldKey;
    }
  },
  mounted() {
    this.calcLineHeight();
    setTimeout(() => {
      if (window.localStorage.getItem('showUnfoldBtnObj')) {
        this.showUnfoldBtnObj = JSON.parse(
          window.localStorage.getItem('showUnfoldBtnObj')
        );
      }
      if (window.localStorage.getItem('unFoldObj')) {
        this.unFoldObj = JSON.parse(window.localStorage.getItem('unFoldObj'));
      }
    }, 300);
  },
  methods: {
    /**
     * 复制功能
     */
    copy() {
      console.log('复制成功');
      var clipboard = new Clipboard('.text-wrapper');
      clipboard.on('success', e => {
        //console.log('复制成功', e);
        this.$toast({
          message: '复制成功',
          duration: 1500
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        this.$toast({
          message: '手机权限不支持复制功能',
          duration: 1500
        });
        //console.log('该浏览器不支持自动复制');
        // 释放内存
        clipboard.destroy();
      });
    },
    getRem() {
      const defaultRem = 16;
      let winWidth = window.innerWidth;
      return (winWidth / 375) * defaultRem;
    },
    calcLineHeight() {
      setTimeout(() => {
        let className = '.fold-content-' + this.foldKey;
        const el = document.querySelector(className);
        let rem = parseFloat(this.getRem());
        let num = this.line === 4 ? 5.25 : 4; //先处理3行和4行的
        if (window.localStorage.getItem('showUnfoldBtnObj')) {
          this.showUnfoldBtnObj = JSON.parse(
            window.localStorage.getItem('showUnfoldBtnObj')
          );
        }
        if (window.localStorage.getItem('unFoldObj')) {
          this.unFoldObj = JSON.parse(window.localStorage.getItem('unFoldObj'));
        }
        if (el.clientHeight > num * rem) {
          //console.log(`超过了${this.line}行`);
          this.$set(this.showUnfoldBtnObj, this.foldKey, true);
          window.localStorage.setItem(
            'showUnfoldBtnObj',
            JSON.stringify(this.showUnfoldBtnObj)
          );
          this.$set(this.unFoldObj, this.foldKey, true);
          window.localStorage.setItem(
            'unFoldObj',
            JSON.stringify(this.unFoldObj)
          );
        } else {
          //console.log(`没超过${this.line}行`);
          this.$set(this.showUnfoldBtnObj, this.foldKey, false);
          window.localStorage.setItem(
            'showUnfoldBtnObj',
            JSON.stringify(this.showUnfoldBtnObj)
          );
          this.$set(this.unFoldObj, this.foldKey, false);
          window.localStorage.setItem(
            'unFoldObj',
            JSON.stringify(this.unFoldObj)
          );
        }
      }, 0);
    },
    handleFold(unFold) {
      this.unFoldObj[unFold] = !this.unFoldObj[unFold];
      if (this.unFoldObj[unFold]){
          this.pic = down;
      } else {
          this.pic = up;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
//公共类
@for $i from 2 through 4 {
  .ellipsis-#{$i} {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$i};
    line-clamp: #{$i};
    -webkit-box-orient: vertical;
    line-height: normal;
  }
}
.unfold {
  color: #a0a0a0;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  font-size: 12px;
  margin-left: -10px;
}
.text-wrapper{
  font-size: 16px;
}
</style>